<template>
  <div class="addgoods">
      <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- Steps 步骤条 -->
<el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
  <el-step title="步骤 4"></el-step>
  <el-step title="步骤 5"></el-step>
</el-steps>
<!-- Tabs 标签页 -->
<template>
  <el-tabs tab-position="left" @tab-click="handleTabclick">
    <el-tab-pane label="基本信息" name="first">
        <template>
             <el-button type="text">文字按钮
            </el-button>
             <el-input style="width:1000px" ></el-input>
            <el-button type="text">文字按钮
               <el-input style="width:1000px" ></el-input>
            </el-button>
            <el-button type="text">文字按钮
               <el-input style="width:1000px" ></el-input>
            </el-button>
            <el-button type="text">文字按钮
               <el-input style="width:1000px" ></el-input>
            </el-button>

        </template>
    </el-tab-pane>
    <el-tab-pane label="商品参数" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="商品属性" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="商品图片" name="fourth">定时任务补偿</el-tab-pane>
    <el-tab-pane label="商品内容" name="fourmain">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      activeName: [],
      formLabelWidth: '120px'
    }
  },
  created () {

  },
  methods: {
    handleTabclick (obj) {
      this.active = parseInt(obj.index)
      console.log(obj.index)
    }
  }
}
</script>
<style lang="scss" scoped>
  el-input{
    width: 80%;
  }
</style>
